<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate === 'origin'"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        初始化
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="baTable.onSubmit(formRef)"
          :model="baTable.form.items"
          label-position="left"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <el-form-item label="设备ID" prop="eid">
            <el-input
              v-model="baTable.form.items!.eid"
              disabled
              placeholder="请录入设备ID"
            />
          </el-form-item>
          <el-form-item label="设备编号" prop="ecode">
            <el-input
              v-model="baTable.form.items!.ecode"
              disabled
              placeholder="请录入设备编号"
            />
          </el-form-item>
          <el-form-item label="压力初始值(Pa)" prop="pressureValue">
            <el-input v-model="baTable.form.items!.pressureValue" />
            <div class="block-help">选填可修改</div>
          </el-form-item>
          <el-form-item label="压力临界值(Pa)" prop="criticalValue">
            <el-input v-model="baTable.form.items!.criticalValue" />
            <div class="block-help">选填可修改</div>
          </el-form-item>
          <el-form-item label="使用寿命长度(小时)" prop="lifeValue">
            <el-input
              v-model="baTable.form.items!.lifeValue"
              placeholder="请输入设备使用寿命长度"
            />
            <div class="block-help">活性炭更换设定</div>
          </el-form-item>
          <el-form-item label="提示更换时长(小时)" prop="prompt">
            <el-input
              v-model="baTable.form.items!.prompt"
              placeholder="请输入设定值"
            />
            <div class="block-help">活性炭提前提示更换时间设定</div>
          </el-form-item>
          <el-form-item label="活性炭型号" prop="type">
            <el-input
              v-model="baTable.form.items!.type"
              placeholder="请输入型号"
            />
          </el-form-item>
          <el-form-item label="活性炭用量(吨)" prop="usernum">
            <el-input
              v-model="baTable.form.items!.usernum"
              placeholder="请输入用量"
              type="number"
            />
          </el-form-item>
          <el-form-item label="活性炭重量(吨)" prop="repalcenum">
            <el-input
              v-model="baTable.form.items!.repalcenum"
              placeholder="请输入活性炭重量"
              type="number"
            />
          </el-form-item>
          <!-- <FormItem
            label="设备激活状态"
            v-model="baTable.form.items!.state"
            type="radio"
            :data="{
              content: {
                1: '离线',
              },
              childrenAttr: { border: true },
            }"
          />
          <el-form-item label="活性炭初始值" prop="life">
            <el-input
              v-model="baTable.form.items!.life"
              placeholder="请输入活性炭初始值"
              disabled
            />
          </el-form-item>
          <el-form-item label="更换滤芯次数" prop="replaceNum">
            <el-input
              v-model="baTable.form.items!.replaceNum"
              placeholder="更换滤芯次数"
              type="number"
              disabled
            />
          </el-form-item> -->
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="baTable.onSubmit(formRef)"
          type="primary"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import type { TableRow } from "@/utils/baTable"; //表格列行类型
import { reactive, ref, inject, onMounted, nextTick } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules, ElTree } from "element-plus";
import FormItem from "@/components/formItem/index.vue";
import { getPointByAddress } from "vue-baidu-map-3x"; //baidu-map组件red

type Option = {
  id: number;
  label: string;
  children: Option[];
};
interface Child1 {
  code: string;
  label: string;
  children: Child1more[];
}
interface Child1more {
  code: string;
  label: string;
  children: TeeeChild[];
}
interface TeeeChild {
  code: string;
  label: string;
}
//接受来自父组件的注入
const baTable = inject("baTable") as baTableClass;
const formRef = ref<InstanceType<typeof ElForm>>();
const treeRef = ref<InstanceType<typeof ElTree>>();

const state: {
  deptOptions: Option[];
  location: string;
  menus: string[];
} = reactive({
  deptOptions: [], //部门列表
  location: "", //详细地址
  menus: [], //已选中的区域
});

const getCheckeds = () => {
  return treeRef
    .value!.getCheckedKeys()
    .concat(treeRef.value!.getHalfCheckedKeys());
};
const rules = reactive<FormRules>({
  eid: [{ required: true, message: "设备ID不能为空", trigger: "blur" }],
  ecode: [{ required: true, message: "设备编号不能为空", trigger: "blur" }],
  // pressureValue: [
  //   { required: true, message: "激活设备压力初始值不能为空", trigger: "blur" },
  // ],
  // criticalValue: [
  //   { required: true, message: "激活设备压力临界值不能为空", trigger: "blur" },
  // ],
  lifeValue: [
    {
      required: true,
      message: "激活设备使用寿命长度不能为空",
      trigger: "blur",
    },
  ],
  prompt: [
    {
      required: true,
      message: "活性炭提前提示更换时间设定不能为空",
      trigger: "blur",
    },
  ],
  type: [
    {
      required: true,
      message: "活性炭型号设定不能为空",
      trigger: "blur",
    },
  ],
  usernum: [
    {
      required: true,
      message: "活性炭用量(吨)设定不能为空",
      trigger: "blur",
    },
  ],
  repalcenum: [
    {
      required: true,
      message: "活性炭重量设定不能为空",
      trigger: "blur",
    },
  ],
});
//地址转换为坐标 北京市海淀区上地十街10号
const pointAndAddress = () => {
  getPointByAddress(
    {
      address: state.location,
    },
    ["wZcU7ugfOpZLuuRTAvNPn3Y36rpFxp1Q"]
  ).then((res) => {
    let { location, formatted_address } = res as any;
    baTable.form.items!.coordinate = JSON.stringify(location);
  });
};
baTable.form.items!.replaceNum = 0;
baTable.form.items!.life = 0;
// baTable.form.items!.state = 1;
console.log("每次都触发");

onMounted(() => {});
defineExpose({
  getCheckeds,
});
</script>
<style lang="scss" scoped>
// .map {
//   left: 0px;
//   top: 0px;
//   z-index: 9;
//   overflow: hidden;
//   width: 200px;
//   height: 100px;
// }
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
</style>
